<template>
  <div class="sweet-wine">
    <!--加载中...-->
    <waiting :updateData="!updateData"></waiting>
    <!--搜索区域-->
    <div class="search-sweet-wine">
      <div class="search-area">
        <input type="text" placeholder="搜您想要的甜酒 如：Rieussec">
      </div>
      <img class="search-icon" src="../assets/picture/search-sweetWine.png" width="24">
    </div>
    <!--筛选-->
    <div class="filter-all-sort">
      <div v-for="(filterSort, index) of filterSorts" :key="index" :style="filterSort.style" class="sorting-one" @click="sorting(index)">
        <p :class="[{'is-filtering': filterSort.isFiltering}, 'filter-area']">
          {{filterSort.name}}
          <span>{{filterSort.oneRule}}</span>
          <span class="img-filter"><img :src="filterSort.isFiltering ? filterTop : filterBottom"></span>
        </p>
      </div>
      <div v-for="(filterSort, index) of filterSorts" :key="index" class="filter-start" v-show="changeSort === index">
        <p v-for="(select, index2) of filterSort.sortRules" :key="index2" :class="[{'selected-sort': filterSort.changeRule === index2}, {'year-vol': filterSort.name !== '排序：'}]" @click="changeOneSort(index, index2)">
          {{select}}
          <img v-if="filterSort.changeRule === index2 && filterSort.name === '排序：'" src="../assets/picture/select-sort.png" width="17" height="17">
        </p>
      </div>
    </div>
    <div class="filter-bg" v-show="changeSort !== ''" @touchstart="hideSort()"></div>
    <!--筛选内容-->
    <div class="result-wine" v-if="updateData">
      <ul class="sweet-wines">
        <li class="sweet-wine-item" v-for="(wineItem, index) of wines" :key="index">
          <img class="wine-pic-item" :src="url + wineItem.img" width="75" height="75">
          <div class="wine-item-info">
            <h1 class="en-name">{{wineItem.name}}</h1>
            <h1 class="ch-name">{{wineItem.cHName}}</h1>
            <p class="wine-item-price">酒庄出厂价：<span v-if="hasHeader">{{wineItem.o_price}}</span><router-link class="login-go" v-else @click="preventDetail($event)" to="/login">登录可见</router-link></p>
            <p class="wine-item-price">到港完税价：<span v-if="hasHeader">{{wineItem.price}}</span><router-link class="login-go" v-else @click="preventDetail($event)" to="/login">登录可见</router-link></p>
          </div>
          <p class="wine-addtime">{{wineItem.addTime}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import waiting from '../components/waiting'

  import filterBottom from '../assets/picture/filter-bottom.png'
  import filterTop from '../assets/picture/filter-top.png'
  export default {
    name: 'sweetWine',
    components: {
      waiting
    },
    data () {
      return {
        filterBottom: filterBottom,
        filterTop: filterTop,
        hasHeader: '',
        filterSorts: [
          {name: '排序：', oneRule: '综合排序', isFiltering: false, changeRule: 0, sortRules: ['综合排序', '最新发布时间', '价格由高到低', '价格由低到高'], style: {width: '100%'}}
        ],
        page: 1, // 页码
        size: 10, // 一页多少数据
        orderBy: 0, // 排序规则
        changeSort: '',
        wines: [],
        url: 'http://www.finewest.cn',
        updateData: true, // 是否正在加载数据
        isPosting: false,
        hasNoData: false // 是否还有数据
      }
    },
    beforeMount () {
      this.hasHeader = this.$utils.getCookie('USER_NAME')
    },
    mounted () {
      this.filterResult()
      window.addEventListener('scroll', this.loadingMore, false)
    },
    methods: {
      filterResult () {
        this.isPosting = true
        this.$http({
          method: 'post',
          url: this.$utils.fineURL() + '/m/goods_tb_list.htm',
          headers: {'USER_NAME': this.hasHeader},
          params: {page: this.page, size: this.size, orderBy: this.orderBy},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          console.log(response.data)
          if (response.data && response.data.length === 0) {
            this.hasNoData = true
            this.updateData = true
            return
          }
          for (var i in response.data) {
            this.wines.push(response.data[i])
          }
          console.log(this.wines)
          this.isPosting = false
          this.updateData = true
        }, function (response) {
          console.log(response)
        })
      },
      sorting (index) {
        this.changeSort = index
        if (this.filterSorts[index].isFiltering) {
          this.filterSorts[index].isFiltering = false
          this.changeSort = ''
          return
        }
        for (var i = 0; i < this.filterSorts.length; i++) {
          this.filterSorts[i].isFiltering = false
        }
        this.filterSorts[index].isFiltering = true
      },
      changeOneSort (index, index2) {
        this.hasNoData = false
        this.filterSorts[index].isFiltering = false
        this.filterSorts[index].changeRule = index2
        this.changeSort = ''
        if (this.filterSorts[index].oneRule === this.filterSorts[index].sortRules[index2]) {
          return
        }
        this.updateData = false
        this.filterSorts[index].oneRule = this.filterSorts[index].sortRules[index2]
        this.orderBy = index2
        this.filterResult()
      },
      hideSort () {
        this.changeSort = ''
        for (var i = 0; i < this.filterSorts.length; i++) {
          this.filterSorts[i].isFiltering = false
        }
      },
      loadingMore () {
        var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop // body滚动的高度
        var clientHeight = document.body.clientHeight > document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight // 可视高度
        var bodyHeight = document.body.scrollHeight || document.documentElement.scrollHeight // 文档高度
        if (scrollTop + clientHeight > bodyHeight - 50) {
          if (!this.isPosting && !this.hasNoData) {
            this.page++
            this.filterResult()
          }
        }
      }
    },
    destroyed () {
      window.removeEventListener('scroll', this.loadingMore, false)
    }
  }
</script>

<style lang="scss" scope>
  *{
    box-sizing: border-box;
  }
  /*.sweet-wine{*/
    .search-sweet-wine{
      padding: 25px 59px 25px 20px;
      position:relative;
      .search-area{
        width: 100%;
        height: 44px;
        input{
          padding: 0 10px;
          font-size: 12px;
          width: 100%;
          height: 44px;
          border: 1px solid #bbbbbb;
          outline: none;
          &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color:    #bbbbbb;
          }
          &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:    #bbbbbb;
          }
          &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:    #bbbbbb;
          }
          &:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color:    #bbbbbb;
          }
        }
      }
      img.search-icon{
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .filter-all-sort{
      height: 40px;
      line-height: 40px;
      position: relative;
      .sorting-one{
        float: left;
        overflow: hidden;
        padding-left: 10px;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        p{
          font-size: 15px;
          color: #000000;
          &.is-filtering{
             color: #e92d46;
           }
          span{
            font-size: 15px;
            color: #e92d46;
            img{
              vertical-align: middle;
            }
          }
        }
      }
      .filter-start{
        width: 100%;
        position: absolute;
        top: 40px;
        z-index: 99;
        background: #ffffff;
        p{
          margin: 0 12px;
          border-bottom: 1px solid #f5f5f5;
          font-size: 15px;
          color: #000000;
          position: relative;
          &.selected-sort{
             color:#e92d46;
           }
          img{
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .filter-bg{
      background: #000000;
      opacity: 0.2;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .result-wine{
      margin: 0 15px;
      .sweet-wines{
        .sweet-wine-item{
          height:119px;
          position: relative;
          &:not(:last-child){
            border-bottom: 1px solid #dedede;
          }
          .wine-pic-item{
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
          }
          .wine-item-info{
            width: 100%;
            padding: 22px 25px 22px 100px;
          }
          .wine-addtime{
            position: absolute;
            right: 25px;
            bottom: 22px;
          }
        }
      }
    }
  /*}*/
</style>
